<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link href="../css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/mui.dtpicker.css" />
    <link rel="stylesheet" href="../css/1px.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
      .mui-content {
        font-size: 13px;
        background-color: #fff;
      }
      
      .flex {
        display: flex;
        margin-top: 5px;
      }
      
      .flex-item {
        flex: 1;
      }
      
      .mui-selectd {
        width: 90%;
        margin-left: 5%;
        border: 1px solid #C0C0C0;
        border-radius: 6px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 6px;
        position: relative;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .mui-icon-arrowdown {
        font-size: 14px;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      /**/
      
      .input-box {
        flex: 3;
      }
      
      .name-input {
        width: 80% !important;
        height: 30px !important;
        font-size: 14px;
        margin-left: 10px;
        margin-top: 5px;
        margin-bottom: 10px !important;
      }
      
      .search-btn {
        flex: 1;
      }
      
      .search-btn button {
        height: 30px;
        margin-top: 5px;
        background-color: #FF9800;
      	border-color: #FF9800;
      }
      .search-btn button:active{
      	background-color: #e6c697;
      }
      /*列表*/
      
      .mui-scroll-wrapper {
        top: 80px;
        bottom: 39px;
      }
      
      .goods-each {
        padding: 5px 5px;
        position: relative;
      }
      
      .goods-each:after {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      
      .img-box {
        flex: 2;
      }
      
      .img-box img {
        height: 70px;
        width: 70px;
        vertical-align: middle;
        text-align: center;
      }
      
      .goods-info-box {
        flex: 4;
        font-size: 14px;
        line-height: 24px;
      }
      
      .goods-info-box div {
        margin-left: 5px;
      }
      
      .goods-op-box {
        flex: 3;
        position: relative;
        height: 100%;
      }
      
      .adjustment {
        color: red;
        text-indent: 10px;
        height: 20px;
      }
      
      .adjust-btn-box {
        width: 100%;
        position: absolute;
        bottom: -50px;
      }
      
      .edit-btn-box {
        flex: 1;
      }
      
      .sure-btn-box {
        flex: 1;
      }
      .sure-btn-box button{
      	background-color: #FF9800;
      	border-color: #FF9800;
      }
      .sure-btn-box button:active{
      	background-color: #e6c697;
      }
      .edit-btn-box button,
      .sure-btn-box button {
        width: 95%;
      }
      
      .sure-icon {
        margin-left: 10px;
      }
      /**/
      /*底部*/
      
      footer {
        height: 38px;
        line-height: 38px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 15px
      }
      
      footer:before {
        content: '';
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 38px;
        width: 100%;
        transform: scaleY(.5);
        background-color: #acacb4;
      }
      .back-btn{
      	background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
      }
      .inventory-next-btn {
         background-color: #ff6800;
        border-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
      }
      /**/
      
      .nogoods {
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        margin-top: 30px;
      }
      /*加载*/
      
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
      /*盘点日期选择*/
      .mainCover{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.5);
        z-index: 500;
        display: flex;
      }
      .dateInputWrap{
        width: 80%;
        height: 150px;
        background: white;
        margin: auto;
        border-radius: 10px;
        position: relative;
      }
      .dateInputWrap h3{
        font-size: 16px;
        width: 100%;
        text-align: center;
        font-weight: normal;
        margin: 10px auto;
        height: 20px;
        line-height: 20px;
      }
      .time-check {
        width: 80%;
        margin: 15px auto;
        height: 40px;
        line-height: 40px;
        border: 1px solid #CCCCCC;
        text-indent: 15px;

        font-size: 18px;
      }

      .tips {
        color: #CCCCCC;
      }
      .inventoryInputBtnWrap{
        height: 30px;
        width: 100%;
        border-top:1px solid #101010;
        display: flex;
        position: absolute;;
        bottom: 0;
        left: 0;
      }
      .inventoryInputBtnWrap div{
        flex:1;
        font-size: 16px;
        color: #2DB7F5;
        text-align: center;
        line-height: 30px;
        height: 100%;
      }
      .inventoryDateInputCancleBtn{
        border-right: 1px solid #101010;
      }
    </style>
  </head>
  <div id="app" class="mui-content">
    <div class="search-box vux-1px-b">
      <div class="flex">
        <div class="flex-item">
          <div id="selsct-type" class="mui-selectd selsct-type">
            <span>全部尺寸</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>
        <div class="flex-item">
          <div id="select-tag" class="mui-selectd select-tag">
            <span>全部用途</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="input-box">
          <input type="text" v-model="params.goodsName" class="name-input" placeholder="输入礼品名称">
        </div>
        <div class="search-btn">
          <button type="button" class="mui-btn mui-btn-success" @click="search">搜索</button>
        </div>
      </div>
    </div>
    <!---->
    <div id="refreshContainer" class="mui-scroll-wrapper total-scroll-wrapper">
      <div class="mui-scroll">
        <ul class="goods-list mui-table-view mui-table-view-chevron ">
						<li class="goods-each" v-for="(item,index) in subtaskGoods" :key='index'>
            <div class="flex">
              <div class="img-box">
                <a href="#middlePopover" class="img-info" :index="index"><img :src="config.imgPath + item.cutImg" alt="" /></a>
              </div>
              <div class="goods-info-box" >
                <div class="goods-name" v-text="item.goodsName">

                </div>
                <div class="goods-id">货品ID：<span v-text="item.goodsId"></span>

                </div>
                <div class="goods-num">
                  盘点数量：<span v-text="item.physicalInventory!==-1?item.physicalInventory:'--'"></span>
                </div>
              </div>
              <div class="goods-op-box">
                <div class="adjustment" v-show="type===2">
                	误差：<span v-text="item.erroeNumber"></span>
                </div>
                
                <div class="adjust-btn-box flex" v-show="type===1">
                  <div class="edit-btn-box">
                    <button type="button" class="mui-btn edit-btn"  @click='editGood(item.goodsId,index)'>调整</button>
                  </div>
                  <div class="sure-btn-box">
                    <button v-show="item.physicalInventory === -1" type="button" class="mui-btn mui-btn-primary sure-btn" @click='saveGood(item.goodsId,index)'>确认</button>
                    <img v-show="item.physicalInventory !== -1"   class="sure-icon" src="../images/sure.png" />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!--加载中-->
        <div class="mui-pull-bottom-pocket">
          <div class="mui-pull">
          </div>
        </div>
        <!--加载中-->
      </div>

    </div>
    <!--底部-->
    <footer class="flex withdraw-btn-box">
      <div class="flex-item mui-action-back">
      	<div class="mui-btn back-btn mui-action-back">返回</div>
      </div>
      <div v-show="type!==2" class="flex-item">
      	<div class="mui-btn inventory-next-btn " @click='inventAllBefore'>提交</div>
      </div>
    </footer>
    <!---->
    <!--显示附加信息-->
    <div id="middlePopover" class="mui-popover">
      <div class="mui-popover-arrow"></div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <p class="fullName">规格：<span></span></p>
          <p class="tags">用途：<span></span></p>
          <p class="score">积分：<span></span></p> 
        </div>
      </div>
    </div>
    <!---->
    <!--输入盘点日期-->
    <div class="mainCover" v-show="showInventoryDateInput">
        <div class="dateInputWrap">
          <h3>请输入盘点日期</h3>
          <div class="time-check" >
            <span class="tips">选择日期</span>
          </div>
          <div class="inventoryInputBtnWrap">
            <div class="inventoryDateInputCancleBtn" @click="hideMainCover">取消</div>
            <div @click="inventAll">确定</div>
          </div>
        </div>
    </div>
  </div>

  <body>
    <script src="../config.js"></script>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.picker.js"></script>
    <script src="../js/mui.poppicker.js"></script>
    <script  src="../js/mui.dtpicker.js"></script>
    <script src="../js/template-native.js"></script>
    <script type="text/javascript">
    	mui.init()
      mui.plusReady(function() {
        var vm = new Vue({
          el: '#app',
          data: function() {
            return {
              types: [{
                value: '',
                text: '全部尺寸'
              }],
              tags: [{
                value: '',
                text: '全部用途'
              }],
              params: {
                subtaskId: '',
                typeId: '',
                tagIds: [],
                fromTime: '',
                toTime: '',
                pageNo: 1,
                pageCount: 20,
                goodsName: '',
                isPhone: true
              },
              subtaskGoods: [],
              isLoading: false,
              pageTotal: 1,
              type: 1,
              inventoryDate:'',
              showInventoryDateInput:false
            }
          },
          mounted: function() {
            this.receiveParams()
            this.getInventoryGoods()
            this.getTypes()
            this.getTag()
            this.bindEvent()
            this.setDateSelect()
            //滚动
            mui('.mui-scroll-wrapper').scroll({
              scrollY: true,
              bounce: true,
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
            });
          },
          methods: {
            ad:function(){
              var i=0;
              do {
                i+=2
              }while(i<10);
              console.log(i)
            },
            //接收传值
            receiveParams: function() {
              var self = plus.webview.currentWebview();
              this.currentShopObj = self.currentShopObj;
              this.params.subtaskId = self.subtaskId
              this.type = self.type * 1
            },
            //设置加载状态
            setLoading: function(type) {
              switch(type) {
                case 1:
                  document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner"></div>\
						<div class="mui-pull-caption">正在加载</div>'
                  break
                case 2:
                  document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-caption">没有更多</div>'
                  break
                case 0:
                  document.querySelector(".mui-pull").innerHTML = ''
                  break
              }

            },
            //获取盘点数据
            getInventoryGoods: function() {
            	var vm = this
              vm.isLoading = true
              vm.setLoading(1)
              config.ajax({
                url: '/inventory/checkSubtask',
                type: 'post',
                data: vm.params,
                success: function(res) {
                  if(res.result === 1) {
                    vm.pageTotal = res.pageTotal;
                    var list=[];
                    for(var k = 0; k < res.subtaskGoods.length; k++) {
//                      vm.subtaskGoods.push(res.subtaskGoods[k])
                      list.push(res.subtaskGoods[k])
                    }
                    vm.subtaskGoods=list;
                    mui('.total-scroll-wrapper').scroll().scrollTo(0, 0, 100);

                    setTimeout(function() {
                      vm.isLoading = false
                    }, 1000)
                    vm.setLoading(0)
                  } else {
                    if(vm.params.pageNo === 1) {
                      vm.subtaskGoods = []
                    }
                    mui.toast(res.errormsg)
                    setTimeout(function() {
                      vm.isLoading = false
                    }, 1000)
                    vm.setLoading(0)
                  }
                }
              })
            },
            search: function() {
            	var vm = this
            		vm.params.pageNo = 1
                vm.subtaskGoods = []
                mui('.total-scroll-wrapper').scroll().scrollTo(0, 0, 1000)
                vm.getInventoryGoods()
            },
            editGood: function(id,index) {
            	 var btnArray = ['取消', '确定'];
                mui.prompt('请输入盘点数量', vm.subtaskGoods[index].physicalInventory === -1 ? 0 : vm.subtaskGoods[index].physicalInventory, '调整', btnArray, function(e) {
                  if(e.index == 1) {
                    vm.subtaskGoods[index].physicalInventory = e.value * 1
                    vm.saveGood(id,index)
                  } else {}
                }, 'div')
                document.querySelector('.mui-popup-input input').type = 'number'
            },
            saveGood: function(id,index) {
            	if(vm.subtaskGoods[index].physicalInventory === -1) {
                  mui.toast('商品未盘点')
                } else {
                  config.ajax({
                    url: '/inventory/inventoryGoods.do',
                    type: 'post',
                    data: {
                      goodsId: vm.subtaskGoods[index].goodsId,
                      physicalInventory: vm.subtaskGoods[index].physicalInventory,
                      subtaskGoodsId: vm.subtaskGoods[index].subtaskGoodsId,
                      subtaskId: vm.params.subtaskId
                    },
                    success: function(res) {
                      if(res.result === 1) {
                        mui.toast('保存成功')
                      } else {
                        mui.toast(res.errormsg)
                      }
                    }
                  })
                }
            },
            inventAllBefore:function(){
              var vm=this;
              vm.showInventoryDateInput = true;
              vm.inventoryDate = '';
            },
            inventAll: function() {
              var vm=this
              if(vm.inventoryDate===''){
                mui.toast("请选择盘点日期！");
              }else{
                vm.inventoryDate= vm.inventoryDate.replace(" ","").replace(":", "")+"00";
                console.log(JSON.stringify(vm.inventoryDate))
                config.ajax({
                  url: '/inventory/submitSubtask',
                  type: 'post',
                  data: {
                    subtaskId: vm.params.subtaskId,
                    date:vm.inventoryDate
                  },
                  success: function(res) {
                    vm.hideMainCover();
                    if(res.result === 1) {
                      mui.toast('完成盘点')
                      var inventoryList = plus.webview.getWebviewById('InventoryList')
                      mui.fire(inventoryList, 'getList')
                      var nowPage = plus.webview.getWebviewById('invertoryDetails')
                      plus.webview.close(nowPage);
                    } else {
                      mui.toast(res.errormsg)
                    }
                  }
                });
              }

            },
            //绑定事件
            bindEvent: function() {
            	var vm = this
              //滚动监听
              document.querySelector('.total-scroll-wrapper').addEventListener('scrollend', function(e) {
                if(e.detail.y <= e.detail.maxScrollY) {
                  if(vm.isLoading === false) {
                    if(++vm.params.pageNo <= vm.pageTotal) {
                      vm.getInventoryGoods()
                    } else {
                      mui.toast('没有更多')
                    }
                  }
                };
                if(e.detail.y ===0) {
                  if(vm.isLoading === false) {
                    if(--vm.params.pageNo >= 1 ) {
                      vm.getInventoryGoods()
                    } else {
                      vm.params.pageNo=1
                      mui.toast('没有更多')
                    }
                  }
                };

              });
            },
            //选择框
            setTypesSelect: function() {
              var typePicker = new mui.PopPicker({
                layer: 2
              });
              typePicker.setData(vm.types);
              var typeCheck = document.querySelector("#selsct-type")
              typeCheck.addEventListener('tap', function(event) {
                typePicker.show(function(items) {
                  if(items[1].text) {
                    typeCheck.innerText = '' + items[0].text + "/" + items[1].text;
                    vm.params.typeId = items[1].value
                  } else {
                    typeCheck.innerText = '' + items[0].text
                    vm.params.typeId = ''
                  }
                  //返回 false 可以阻止选择框的关闭
                  //return false; 
                });
              }, false)
            },
            setTagsSelect: function() {
              var tagPicker = new mui.PopPicker();
              tagPicker.setData(vm.tags)
              var tagCheck = document.querySelector('#select-tag')
              tagCheck.addEventListener('tap', function(event) {
                tagPicker.show(function(items) {
                  tagCheck.innerHTML = "<span>" + items[0].text + "</span>"
                  vm.params.tagIds = []
                  if(items[0].value) {
                    vm.params.tagIds.push(items[0].value)
                  }
                })
              })
            },
            setDateSelect:function(){
              var vm = this
              //时间选择
              var options = {
                'type': 'datetime'
              }
              var inventoryDatePicker = new mui.DtPicker(options);
              var inventoryDateDom = document.querySelector(".time-check");
              inventoryDateDom.addEventListener('tap', function() {
                inventoryDatePicker.show(function(item) {
                  inventoryDateDom.innerText = item.text;
                  var re = /-/g;
                  vm.inventoryDate = item.text.replace(re,'');
                })
              });
            },
            //获取类
            getTypes: function() {
              config.ajax({
                type: "get",
                url: config.basePath + "/goodsType/get.do",
                async: true,
                success: function(res) {
                  if(res.result === 1) {
                    res.data.forEach(function(item) {
                      var obj = {}
                      obj.value = item.id
                      obj.text = item.name
                      var children = []
                      if(item.children.length > 0) {
                        item.children.forEach(function(item1) {
                          var obj1 = {}
                          obj1.value = item1.id
                          obj1.text = item1.name
                          children.push(obj1)
                        })
                      }
                      obj.children = children
                      vm.types.push(obj)
                    })
                  }
                }
              });
              setTimeout(function() {
                vm.setTypesSelect()
              }, 1000)
            },
            //获取用途
            getTag: function() {
              var vm = this
              config.ajax({
                type: 'post',
                url: config.basePath + '/tag/get.do',
                data: {
                  tagDescribe: ''
                },
                headers: {
                  'Content-Type': 'application/json'
                },
                success: function(res) {
                  if(res.result === 1) {
                    res.tags.forEach(function(item) {
                      var obj = {}
                      obj.value = item.tagId
                      obj.text = item.tagDescribe
                      vm.tags.push(obj)
                    })
                  }
                }
              })
              setTimeout(function() {
                vm.setTagsSelect()
              }, 1000)
            },
          //  隐藏遮罩层
            hideMainCover:function(){
              vm.showInventoryDateInput=false;
              vm.inventoryDate='';
            },
          }
        })
      })
    </script>
  </body>

</html>